<template>
  <view class="wrap">
    <view class="header">
      <img class="headerBg" src="https://ainengli.hzjrsw.com/jkhx/10.png" alt="" />
      <view class="min">
        <img
          class="img"
          v-if="state.userObj.gender == '女性'"
          src="@/static/image/woman.png"
          alt=""
        />
        <img class="img" v-else src="@/static/image/man.png" alt="" />
        <view v-if="state.userObj.phone && state.userObj.phone != ''" class="tel">{{
          stars(state.userObj.phone)
        }}</view>
      </view>
    </view>
    <view class="business">
      <view class="title">我的业务</view>
      <view class="list">
        <view class="item" @tap="checkFamily">
          <view class="left">
            <img class="img" src="@/static/image/my-family-icon.png" alt="" />
            <text class="name">家庭成员</text>
          </view>
          <img class="right" src="@/static/image/my-arrow-right.png" alt="" />
        </view>
        <view class="item" @tap="order">
          <view class="left">
            <img class="img" src="@/static/image/my-order-icon.png" alt="" />
            <text class="name">我的订单</text>
          </view>
          <img class="right" src="@/static/image/my-arrow-right.png" alt="" />
        </view>
        <view class="item" @tap="followUp">
          <view class="left">
            <img class="img" src="@/static/image/my-follow-icon.png" alt="" />
            <text class="name">随访记录</text>
          </view>
          <img class="right" src="@/static/image/my-arrow-right.png" alt="" />
        </view>
      </view>
    </view>
  </view>
</template>

<script setup lang="ts">
import { reactive, ref } from 'vue'
import { onShow } from '@dcloudio/uni-app'
const state = reactive({
  userObj: {}
})
onShow(() => {
  uni.removeStorageSync('healthManageTab')
  state.userObj = uni.getStorageSync('userInfo') ? JSON.parse(uni.getStorageSync('userInfo')) : {}
})
const checkFamily = () => {
  uni.navigateTo({
    url: '/packA/pages/family/index?type=familys'
  })
}
const order = () => {
  uni.navigateTo({
    url: '/packA/pages/my/order'
  })
}
const followUp = () => {
  uni.navigateTo({
    url: '/packA/pages/follows/index'
  })
}
const stars = (val: string) => {
  return val.substring(0, 3) + '****' + val.substring(7)
}
</script>

<style lang="scss" scoped>
.wrap {
  .header {
    position: relative;
    height: 306rpx;

    .headerBg {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
    }

    .min {
      position: relative;
      z-index: 1;
      display: inline-block;
      width: calc(100% - 64rpx);
      margin: 48rpx 0 0 32rpx;

      .img {
        display: inline-block;
        width: 96rpx;
        height: 96rpx;
        vertical-align: middle;
      }

      .tel {
        display: inline-block;
        margin-left: 24rpx;
        font-size: 36rpx;
        font-weight: 700;
        color: #131313;
        vertical-align: middle;
      }
    }
  }

  .business {
    position: relative;
    z-index: 1;
    padding: 0 32rpx;
    margin: -110rpx 32rpx 0;
    background: #fff;
    border-radius: 16rpx;

    .title {
      height: 100rpx;
      font-size: 32rpx;
      font-weight: 700;
      line-height: 100rpx;
      color: #222;
      border-bottom: 1rpx solid #e5e6eb;
    }

    .list {
      .item {
        position: relative;
        height: 108rpx;
        line-height: 108rpx;

        .left {
          .img {
            display: inline-block;
            width: 40rpx;
            height: 40rpx;
            margin-right: 16rpx;
            vertical-align: middle;
          }

          .name {
            display: inline-block;
            font-size: 30rpx;
            color: #222;
            vertical-align: middle;
          }
        }

        .right {
          position: absolute;
          top: 50%;
          right: 0;
          display: block;
          width: 32rpx;
          height: 32rpx;
          transform: translateY(-50%);
        }
      }
    }
  }
}
</style>
